<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>插槽</title>
	<style>
		.group {
			margin-bottom: 40px;
		}
	</style>
</head>
<body>

	<div id="app">
		<div class="group">
			<h3>后备内容</h3>
			<button-one></button-one>
			<button-one>取消</button-one>
		</div>

		<div class="group">
			<h3>具名插槽</h3>
			<p>slot="age"这种插槽方式，在v2.6时已废弃，不过在v2.xx都可以使用。v3.xx只支持使用v-slot:age的方法的具名插槽</p>
			<p>v-slot:age 缩写 #age</p>
			<student-info>
				<template v-slot:name>张胜男</template>
				<template v-slot:age>age</template>
				<template #school>重庆科技学院</template>
			</student-info>
		</div>
			
		<div class="group">
			<h3>for循环插槽</h3>
			<system-info>
				<template v-for="(item, index) in slotList" :key="index" #[item]>测试系统</template>
			</system-info>
		</div>

	</div>
	
	<script src="https://cdn.staticfile.net/vue/3.3.4/vue.global.js"></script>
	<script>
		// 后备内容
		var buttonOne = {
			template: `<button><slot>确 定</slot></button>`
		}

		// 具名插槽
		var studentInfo = {
			template: `<div>
				<p>姓名：<slot name="name"></slot></p>
				<p>年龄：<slot name="age"></slot></p>
				<p>学校：<slot name="school"></slot></p>
			</div>`,
			mounted () {
				console.log(this.$slots);
				// 在组合式API中，使用useSlots，获取插槽列表
			}
		}

		// 变量插槽名
		var systemInfo = {
			template: `<div>
				系统名称：<slot name="systemInfo"></slot>
			</div>`,
			mounted() {
				console.log(this.$slots);
			}
		}


		const app = Vue.createApp({
			data () {
				return {
					slotName: 'systemInfo',

					slotList: ['systemInfo', 'test2', 'test3'],
				}
			},
			components: {
				buttonOne,
				studentInfo,
				systemInfo,
			}
		})
		app.mount("#app");
	</script>
</body>	
</html>